<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>
<apes-content >
  <form apes-form>
    <div apes-row [apesGutter]="24">
      <div apes-col [apesSpan]="8">
        <apes-form-item>
          <apes-form-label [apesSm]="4" [apesXs]="24">公司</apes-form-label>
          <apes-form-control [apesSm]="20" [apesXs]="24" [apesValidateStatus]="'error'">
            <ng-select style="width: 100%; display: inline-block"
                       [items]="company"
                       bindLabel="name"
                       bindValue="id"
                       clearAllText [placeholder]="'请选择公司'" [(ngModel)]="companyId"  [ngModelOptions]="{standalone: true}" [notFoundText]="'无法找到'" typeToSearchText
                       [searchFn]="customSearchFn">
              <ng-template ng-label-tmp let-item="item" let-clear="clear">
                <span class="ng-value-label">{{formatter(item, getValueFormatter())}}</span>
                <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
              </ng-template>
              <ng-template ng-option-tmp let-item="item">
                <span class="ng-value-label">{{formatter(item, getDownFormatter())}}</span>
              </ng-template>
            </ng-select>
            <apes-form-explain *ngIf="companyId=='' || companyId==null ">请选择公司！</apes-form-explain>
          </apes-form-control>
        </apes-form-item>
      </div>
<!--      <div apes-col [apesSpan]="8">-->
<!--        <apes-form-item>-->
<!--          <apes-form-label [apesSm]="4" [apesXs]="24" apesRequired>部门</apes-form-label>-->
<!--          <apes-form-control [apesSm]="20" [apesXs]="24">-->
<!--            <ng-select style="width: 100%; display: inline-block"-->
<!--                       [items]="dept"-->
<!--                       bindLabel="name"-->
<!--                       bindValue="id"-->
<!--                       clearAllText [placeholder]="'请选择部门'" [(ngModel)]="deptId"  [ngModelOptions]="{standalone: true}" [notFoundText]="'无法找到'"-->
<!--                       [searchFn]="customSearchFn"-->
<!--                       typeToSearchText>-->
<!--              <ng-template ng-label-tmp let-item="item" let-clear="clear">-->
<!--                <span class="ng-value-label">{{formatter(item, getValueFormatter())}}</span>-->
<!--                <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>-->
<!--              </ng-template>-->
<!--              <ng-template ng-option-tmp let-item="item">-->
<!--                <span class="ng-value-label">{{formatter(item, getDownFormatter())}}</span>-->
<!--              </ng-template>-->
<!--            </ng-select>-->
<!--          </apes-form-control>-->
<!--        </apes-form-item>-->
<!--      </div>-->
      <div apes-col [apesSpan]="8">
        <apes-form-item>
          <apes-form-label [apesSm]="4" [apesXs]="24">合作伙伴</apes-form-label>
          <apes-form-control [apesSm]="20" [apesXs]="24">
<!--            <ng-select style="width: 100%; display: inline-block"-->
<!--                       [items]="partner"-->
<!--                       bindLabel="name"-->
<!--                       bindValue="id"-->
<!--                       clearAllText [placeholder]="'请选择合作伙伴'" [(ngModel)]="partnerId"  [ngModelOptions]="{standalone: true}" [notFoundText]="'无法找到'"-->
<!--                       [searchFn]="customSearchFn"-->
<!--                       typeToSearchText>-->
<!--              <ng-template ng-label-tmp let-item="item" let-clear="clear">-->
<!--                <span class="ng-value-label">{{formatter(item, getValueFormatter())}}</span>-->
<!--                <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>-->
<!--              </ng-template>-->
<!--              <ng-template ng-option-tmp let-item="item">-->
<!--                <span class="ng-value-label">{{formatter(item, getDownFormatter())}}</span>-->
<!--              </ng-template>-->
<!--            </ng-select>-->
            <apes-ng-select [selectData]="partnerObj"
                            [valueFormatter]="'\'[ \' + value.id + \' ]\' + \' \' + value.name'"
                            [downFormatter]="'\'[ \' + value.id + \' ]\' + \' \' + value.name'"
                            [placeholder]="'请选择合作伙伴'"
                            [searchSelectApi]="partnerApi"
                            (change)="checkData($event)"
                            [domain]="partnerDomain()"></apes-ng-select>
          </apes-form-control>
        </apes-form-item>
      </div>
    </div>
  </form>



  <div style="padding: 0 20px">
    <ag-grid-angular #grid
                     style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                     enableColResize="true"
                     enableSorting="true"
                     suppressLoadingOverlay="true"
                     [modules]="modules"
                     [rowData]="rowData"
                     [gridOptions]="gridOptions"
                     [columnDefs]="columnDefs"
                     [localeText]="localeText"
                     (rowClicked)= "onRowClick($event)">
    </ag-grid-angular>
  </div>

  <apes-card>
    <div style="display: flex">
      <div apes-col apesSpan="6">
        <div>
          <span>日期：</span>
          <div class="boxDiv">
            <apes-range-picker [(ngModel)]='timeList' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
          </div>
        </div>
        <p [ngStyle]="{ display: hind }"><i class="anticon anticon-exclamation-circle-o"></i> 必填！最小时间为一天</p>
      </div>

      <div>
        <button apes-button [apesType]="'default'"
                style="margin-top: 6px;" (click)="queryBtn()" > 查询 </button>
      </div>

    </div>

  </apes-card>

  <apes-tabset [apesAnimated]= "false" [apesType]="'card'" *ngIf="rowData.length > 0">
    <apes-tab *ngFor="let tab of tabList" [apesTitle]="tab.title" (apesClick)="tabChanges(tab.id)">

      <apes-card [apesBordered]="false" *ngIf="rowDataItem.length > 0">
        <ag-grid-angular #grid
                         style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                         enableColResize="true"
                         enableSorting="true"
                         enableFilter="true"
                         suppressLoadingOverlay="true"
                         [rowData]="rowDataItem"
                         [gridOptions]="gridOptions"
                         [columnDefs]="tab.columnDefs"
                         [localeText]="localeText">
        </ag-grid-angular>
      </apes-card>

      <div *ngIf="rowDataItem.length === 0" class="apes-chatter-loading">
        无数据
        <!--<div class="k-line2 k-line12-1" ></div>-->
        <!--<div class="k-line2 k-line12-2" ></div>-->
        <!--<div class="k-line2 k-line12-3" ></div>-->
        <!--<div class="k-line2 k-line12-4" ></div>-->
        <!--<div class="k-line2 k-line12-5" ></div>-->
        <!--<div class="k-line2 k-line12-6" ></div>-->
        <!--<div class="k-line2 k-line12-7" ></div>-->
        <!--<div class="k-line2 k-line12-8" ></div>-->
      </div>

      <div *ngIf="rowDataItem.length > 0">
        <apes-pagination  [(apesPageIndex)]="currentPage" [apesTotal]="total" [apesSize]="'small'"
                          [apesPageSize]="pageSize"
                          (apesPageIndexChange)="onPageIndexChange()"
                          [apesShowTotal]="totalTemplate"></apes-pagination>
        <ng-template #totalTemplate let-total>
          &nbsp;{{pageSize*currentPage - pageSize + 1}} ~ {{pageSize*currentPage}} - {{pageSize}}条/页 - 共 {{total}} 条
        </ng-template>
      </div>
    </apes-tab>
  </apes-tabset>
</apes-content>


